{extend name="personcentor/information"}
{block name="head"}
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>万水千山客栈</title>
    <link href="/static/index/business/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/static/index/business/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="/static/index/business/css/personal.css" rel="stylesheet" type="text/css">

    {load href="/static/index/css/bootstrap.min.css"}
    {load href="/static/index/css/footer.css"}
    <!--whp-->
    <link href="/static/index/business/css/orstyle.css" rel="stylesheet" type="text/css">
    <!--whp-->
    <script src="/static/index/business/js/jquery.min.js"></script>
    <style type="text/css">
        #bankCard{
            width: 550px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>
{/block}

{block name="main"}
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-order">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> / <small>Order</small></div>
                </div>
                <hr/>

                <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

                    <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">所有订单</a></li>

                        <li><a href="#tab5">待评价</a></li>
                    </ul>

                    <div class="am-tabs-bd">
                        <!--所有订单-->
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">房子</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">房价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">房屋操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>
                            <div class="order-main">
                                <div class="order-list">

                                    <!--交易成功-->

                                    {volist name="order" id="vo"}
                                    {if $vo.order_status == '1'}
                                    <!--订单未支付-->
                                    <div class="order-status5">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;">{$vo.order_no}</a></div>
                                            <span>成交时间：{$vo.order_time}</span>
                                            <!--    <em>店铺：小桔灯</em>-->
                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img src="/uploads/housepic/{:str_replace('\','/',$vo['house_pic'])}" class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">

                                                                <a href="#">
                                                                    <p>{$vo.house_name}</p>
                                                                    <p class="infolittle">预订人：{$vo.input_person_name}
                                                                        <br/>入住：{$vo.input_date} 离开:{$vo.out_date} </p>
                                                                    <p>地址:{$vo.house_address}</p>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price">
                                                            {$vo.houseprice}
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            {$vo.order_num}套
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>


                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：￥{$vo.total_price}


                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">{$vo.order_status == '1'? '未支付' : '已支付'}</p>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <div data-id="{$vo.id}" class="am-btn am-btn-danger anniu btn-del">
                                                        取消订单</div><p>
                                                        <div class="am-btn am-btn-danger anniu">
                                                        <a href="{:url('index/ordermanagement/update',['id' => $vo['id']])}">支付房款</a></div>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {else}
                                    <!--订单已支付-->
                                    <div class="order-status5">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;">{$vo.order_no}</a></div>
                                            <span>成交时间：{$vo.order_time}</span>
                                            <!--    <em>店铺：小桔灯</em>-->
                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img src="/uploads/housepic/{:str_replace('\','/',$vo['house_pic'])}" class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">

                                                                <a href="#">
                                                                    <p>{$vo.house_name}</p>
                                                                    <p class="infolittle">预订人：{$vo.input_person_name}
                                                                        <br/>入住：{$vo.input_date} 离开:{$vo.out_date} </p>
                                                                    <p>地址:{$vo.house_address}</p>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price">
                                                            {$vo.houseprice}
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            {$vo.order_num}套
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>


                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：￥{$vo.total_price}


                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">{$vo.order_status == '1' ? '未支付' : '已支付'}</p>


                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <div class="am-btn am-btn-danger anniu">
                                                            <a href="">支付完成</a></div>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {/volist}



                                </div>

                            </div>
                        </div>
                        <!--所有订单结束-->

                        <!--评价商品-->
                        <div class="am-tab-panel am-fade" id="tab5">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">房屋类型</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">房价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">房屋操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
                                    <!--不同状态的订单	-->
                                    <!--遍历已经支付的房子，并且评价-->
                                    {volist name="order" id="v"}
                                    {if $v.order_status == '2'}
                                    <div class="order-status4">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;">{$vo.order_no}</a></div>
                                            <span>成交时间：{$v.order_time}</span>

                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img src="/uploads/housepic/{:str_replace('\','/',$v['house_pic'])}" class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p>{$v.house_name}</p>
                                                                    <p class="info-little">预订人：{$v.input_person_name}
                                                                        <br/>入住：{$vo.input_date} 离开:{$v.out_date} </p>
                                                                    <p>地址:{$v.house_address} </p>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price">
                                                            {$v.houseprice}
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            <span>×</span>2
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">
                                                            <a href="refund.html">退房</a>
                                                        </div>
                                                    </li>
                                                </ul>

                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：{$v.total_price}

                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">交易成功</p>

                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <a href="{:url('index/comment/commentlist',['id' => $v['id']])}">
                                                            <div class="am-btn am-btn-danger anniu">
                                                                评价商品</div>
                                                        </a>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {/volist}
                                </div>

                            </div>

                        </div>
                        <!--评价商品结束-->

                    </div>
                </div>

            </div>
        </div>
    </div>



    <script>
        $(function(){
            //触发用户的删除操作
            $('.btn-del').click(function(){
                var ac_id = $(this).attr('data-id');
                console.log('删除操作的id为:',ac_id);

                if(confirm('你确定要删除该订单吗？')){
                    var obj = $(this).parents('.order-status5');
                    console.log(obj);

                    //调用ajax进行删除
                    delAjax(ac_id,obj);
                }
            });

            //执行ajax删除
            function delAjax(id,obj){
                $.ajax({
                    type : 'delete',      //delete 删除方式
                    url : '/Ordermanagement/'+id,
                    dataType : 'json',
                    success : function(data){
                        console.log(data);
                        if (data.status) {
                            alert(data.info);
                            // 将当前的节点删除掉
                            obj.remove();
                        } else {
                            alert(data.info);
                        }
                    },
                    error : function(){
                        //ajax操作失败
                        alert('ajax请求失败');
                    }


                })
            }

        });

    </script>

{/block}


